import { defineStore } from "pinia"
import { ref } from "vue"
import type { ChartEditStoreType } from "./chartEditStore.d"
import { debounce } from "lodash"

export const useChartEditStore = defineStore('chartEditStore', () => {

  const editCanvas = ref<ChartEditStoreType['editCanvas']>({
    editLayoutDom: null, // 编辑器布局DOM
    editContentDom: null, // 编辑器内容DOM
    scale: 0.50469, // 系统缩放比例
    userScale: 0.50469, // 用户控制缩放比例
    isSelect: false, // 是否选中
    offset: 20, // 偏移量
  })
  const editCanvasConfig = ref<ChartEditStoreType['editCanvasConfig']>({
    width: 1920,
    height: 1080,
  })
  // ! 拖拽组成的组件列表
  const componentList = ref([{
    key: "Chart",
    name: "图表1",
    attr: {
      background: "#fff",
      x: 0,
      y: 0,
      w: 500,
      h: 300,
    },
  },])
  const addComponentList = (component) => {
    componentList.value.push(component)
  }
  // * 设置editCanvas相关数据
  const setEditCanvas = <T extends keyof ChartEditStoreType['editCanvas'], K extends ChartEditStoreType['editCanvas'][T]>(key: T, value: K) => {
    editCanvas.value[key] = value
  }
  // * 设置editCanvasConfig相关数据
  const setPageSize = (scale: number) => {
    const dom = editCanvas.value.editContentDom
    if (dom) {
      dom.style['height'] = `${editCanvasConfig.value.height * scale}px`
      dom.style['width'] = `${editCanvasConfig.value.width * scale}px`
    }
  }
  // * 设置缩放
  const setScale = (scale: number) => {
    editCanvas.value.scale = scale
    editCanvas.value.userScale = scale
    setPageSize(scale)
  }
  // * 计算缩放
  const computedScale = () => {
    console.log('计算缩放')
    if (editCanvas.value.editLayoutDom) {
      // 现有展示区域
      const width = editCanvas.value.editLayoutDom.clientWidth - editCanvas.value.offset * 2 - 5
      const height = editCanvas.value.editLayoutDom.clientHeight - editCanvas.value.offset * 4
      // 用户设定大小
      const editCanvasWidth = editCanvasConfig.value.width
      const editCanvasHeight = editCanvasConfig.value.height
      console.log(`[展示区域]=>宽${width}, 高${height}`)
      console.log(`[用户制定大屏区域]=>宽${editCanvasWidth}, 高${editCanvasHeight}`)

      // 需保持的比例
      const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5))
      const currentRate = parseFloat((width / height).toFixed(5))
      if (currentRate > baseProportion) {
        // 表示更宽
        const scaleWidth = parseFloat(((height * baseProportion) / editCanvasWidth).toFixed(5))
        console.log(`[当前比例]=>${currentRate}, [基准比例]=>${baseProportion}, [缩放比例]=>${scaleWidth}`)
        setScale(scaleWidth > 1 ? 1 : scaleWidth)
      } else {
        // 表示更高
        const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5))
        console.log(`[当前比例]=>${currentRate}, [基准比例]=>${baseProportion}, [缩放比例]=>${scaleHeight}`)
        setScale(scaleHeight > 1 ? 1 : scaleHeight)
      }
    } else {
      console.log(`[computedScale] => editLayoutDom is null`)
    }
  }
  //  * 监听缩放
  const listenScale = () => {
    const resizeCallback = debounce(computedScale, 200)
    resizeCallback()
    window.addEventListener('resize', resizeCallback)
    return () => {
      window.removeEventListener('resize', resizeCallback)
    }
  }
  return {
    editCanvas,
    editCanvasConfig,
    setEditCanvas,
    listenScale,
    setScale,
    computedScale,

    componentList,
    addComponentList
  }
})